body{
	margin: 0;
	padding: 0;
	background: #000;	
	font-family: "montserrat", sans-serif;
}

.middle{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.text{
	color: #fff;
	text-transform: uppercase;
	font-size: 60px;
	text-align: center;
	letter-spacing: 14px;
	-webkit-user-select: none;
    	/* user-select -- это нестандартное свойство */
    	-moz-user-select: none;
    	/* поэтому нужны префиксы */
    	-ms-user-select: none;
}

.text::before,.text::after{
	content:attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.text::before{
	color: #ff00c1;
	animation: glitch-effect 3s infinite;
}

.text::before{
	color: #3498db;
	animation: glitch-effect 2s infinite;
}

@keyframes glitch-effect {
	0%{
		left: -2px;
		top: -2px;
	}
	25%{
		left: 2px;
		top: 0px;
	}
	50%{
		left: -1px;
		top: 2px;
	}
	75%{
		left: 1px;
		top: -1px;
	}
	100%{
		left: 0px;
		top: -2px;
	}
}